<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="./style/index2.css">
  <title>测试接口</title>
  <style>
    #app {
      display: flex;
      justify-content: space-around;
    }

    .docs {
      width: 35%;
    }

    .test {
      /* flex-grow: 1; */
      width: 50%;
    }

    .test {
      margin-left: 20px;
    }

    pre {
      background: #ebebeb;
      padding: 20px 10px;
    }

    .el-form-item input {
      width: 500px;
    }
  </style>
</head>

<body>
  <div id="app" style="width: 80%;">
    <!-- <div class="docs">
      <div class="el-card" style="min-height: 500px;">
        <div slot="header">
          <span>{{name}}</span>
        </div>
        <ol>
          <li>
            <span>接口地址</span>
            <pre>{{url}}</pre>
          </li>
          <li>
            <span>请求参数</span>
            <pre>{{params}}</pre>
          </li>
          <li>
            <p>响应数据</p>
            <p v-html="resp">响应数据</p>
          </li>
        </ol>
      </div>
    </div> -->


    <div class="test">
      <div class="el-card">
        <div slot="header">
          <span>模块管理</span>
        </div>

        <div class="el-form" label-width="80px">
          <div class="el-form-item" label="请求地址">
            <span class="label">接口地址</span>
            <input v-model="url">
          </div>

          <div class="el-form-item">
            <span class="label">模块名称</span>
            <input placeholder="请输入模块名称" @keydown.native.enter="onSubmit" v-model="name" />
          </div>
          
          <div class="el-form-item">
            <button v-if="url==='/module/add'" type="primary" @click="onSubmit" style="margin-left:100px;">新增</button>
            <button v-else type="danger" @click="onSubmit" style="margin-left:100px;">删除</button>
          </div>
        </div>
      </div>
      <!-- <div class="el-card" style="margin-top: 20px;min-height:300px;">
        <div slot="header">
          <span>响应数据</span>
        </div>
        <div v-html="res">
        </div>
      </div> -->
    </div>
  </div>

  <script src="/js/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        name: '',
      },

      created() {
        let search = location.search;
        this.name = search.replace(/.*name=(.*)/, '$1');
      },

      computed: {
        url() {
          if (location.search.includes('add')) {
            return "/module/add";
          } else {
            return "/module/del";
          }
        }
      },

      methods: {
        onSubmit() {
          if (!this.name) {
            alert('模块名不能为空');
            return false;
          }
          axios.post(this.url, { name: this.name }).then(res => {
            location.href = '/?date='+Date.now(); 
          }).catch(err => {
            this.res = err.message;
            location.href = '/?date='+Date.now(); 
          })
        },
      },
    })
  </script>
  <script src="/js/axios.js"></script>
</body>
</html>